/*
 * @Description: 查看申请弹窗
 * @Author: Rfan
 * @Date: 2022-02-24 16:16:12
 * @LastEditTime: 2022-05-25 08:55:50
 */

import { Button, Descriptions, Modal, Table } from 'antd';
import classNames from 'classnames/bind';
import dayjs from 'dayjs';
import { useFormatMessage } from '@/utils/intlHelpers';
import type { ICommonDialog } from '@/interfaces/global';
import styles from './styles/index.module.scss';

const cx = classNames.bind(styles);
const { Column } = Table;

interface IApproveDialogProps extends ICommonDialog {
  title?: string;
  data?: { applyForm: any; archiveItemList: any[] };
}

const ApproveDialog = (props: IApproveDialogProps) => {
  const { visible, title = '利用审批', data, onClose } = props;
  const formatMessage = useFormatMessage();
  const applyForm = data?.applyForm || {};
  const archiveItemList = data?.archiveItemList || [];

  /**
   * @description: 关闭借阅详情弹窗
   */
  const onCancel = () => {
    onClose();
  };

  /**
   * @description: 打开预览弹窗
   */
  const showPreviewDialog = () => {};

  return (
    <Modal
      title={title}
      visible={visible}
      width={800}
      destroyOnClose
      onCancel={onCancel}
      footer={[
        <Button key="submit" type="primary" onClick={onCancel}>
          确定
        </Button>
      ]}
    >
      <div className={cx('info')}>
        <Descriptions title="利用申请信息" size="middle" column={12}>
          <Descriptions.Item label="申请日期" span={4}>
            {dayjs(applyForm.applyTime).format('YYYY-MM-DD HH:mm:ss')}
          </Descriptions.Item>
          <Descriptions.Item label="申请人" span={applyForm.realUser ? 4 : 8}>
            {applyForm.proposer}
          </Descriptions.Item>
          {applyForm.realUser && (
            <Descriptions.Item label="实际利用人" span={4}>
              {applyForm.realUser}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="申请类型" span={3}>
            {applyForm.useTypeEntity}
          </Descriptions.Item>
          <Descriptions.Item label="利用目的" span={3}>
            {applyForm.purpose}
          </Descriptions.Item>
          <Descriptions.Item label="审批状态" span={3}>
            {applyForm.status}
          </Descriptions.Item>
          <Descriptions.Item label="利用日期" span={3}>
            {applyForm.useDay}
          </Descriptions.Item>
          <Descriptions.Item label="利用说明">{applyForm.description}</Descriptions.Item>
        </Descriptions>
      </div>
      <div className={cx('list')}>
        <h6>审批利用列表</h6>
        <Table dataSource={archiveItemList} rowKey="id" size="small" bordered>
          <Column title="序号" dataIndex="id" key="id" align="center" />
          <Column title="档号" dataIndex="archiveNo" key="archiveNo" align="center" />
          <Column title="题名" dataIndex="title" key="title" align="center" />
          <Column
            title="档案类型"
            dataIndex="archiveTypeName"
            key="archiveTypeName"
            align="center"
          />
          <Column title="所属部门" dataIndex="departmentName" key="departmentName" align="center" />
          <Column title="实体利用" key="purpose" align="center" render={() => applyForm.purpose} />
          <Column
            title="电子利用"
            key="useTypeElectronicRights"
            align="center"
            render={() => applyForm.useTypeElectronicRights}
          />
          <Column title="天数" key="useDay" align="center" render={() => applyForm.useDay} />
          <Column
            title={formatMessage('tableAction')}
            key="action"
            align="center"
            render={(_text, _record: any) => (
              <Button type="link" onClick={showPreviewDialog}>
                查看
              </Button>
            )}
          />
        </Table>
      </div>
    </Modal>
  );
};

export default ApproveDialog;
